<template>
  <div>
    <el-dialog :visible.sync="dialogTableVisible" title="作废" append-to-body width="30%">
      <el-form size="small" label-width="80px">
        <el-form-item label="作废原因" prop="description">
          <el-input v-model="discardDescription" :rows="2" type="textarea" placeholder="请输入作废原因" style="width: 370px;"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="cancel">取消</el-button>
        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { discard } from '@/api/framework/flow/flowProcess'
export default {
  name: 'Discard',
  props: {
    processInstanceId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      discardDescription: '',
      dialogTableVisible: false,
      loading: false
    }
  },
  methods: {
    cancel() {
      this.resetForm()
    },
    resetForm() {
      this.discardDescription = ''
      this.dialogTableVisible = false
    },
    doSubmit() {
      this.loading = true
      discard(this.processInstanceId, this.discardDescription).then(res => {
        this.$notify({
          title: '作废成功',
          type: 'success',
          duration: 2500
        })
        this.resetForm()
        this.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    }
  }
}
</script>
